/*
 * @Author: hongbin
 * @Date: 2021-12-15 13:20:27
 * @LastEditors: hongbin
 * @LastEditTime: 2021-12-15 15:23:59
 * @Description: 背景
 */
import { Image, Swiper, SwiperItem, View } from "@tarojs/components";
import { styled } from "linaria/lib/react";
import React, { ReactElement } from "react";
import shan from "../assets/shan.svg";
import shan1 from "../assets/shan1.svg";
import shan2 from "../assets/shan2.svg";
import shan3 from "../assets/shan3.svg";

const Background = (): ReactElement => {
  return (
    <Wrap>
      <Swiper autoplay circular>
        <SwiperItem>
          <Image src={shan} />
        </SwiperItem>
        <SwiperItem>
          <Image src={shan1} />
        </SwiperItem>
        <SwiperItem>
          <Image src={shan2} />
        </SwiperItem>
        <SwiperItem>
          <Image src={shan3} />
        </SwiperItem>
      </Swiper>
    </Wrap>
  );
};

export default Background;

const Wrap = styled(View)`
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: -2;

  swiper {
    width: inherit;
    height: inherit;
    swiper-item {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  image {
    width: 50vw;
    height: 50vw;
  }
`;
